<template>
  <div>
    <template v-if="type === 'Basices'">
      <ProductBasics :width="width" :imgSrc="imgSrc" :title="title" :desc="desc" :price="price" :delPrice="delPrice"></ProductBasics>
    </template>
    <template v-if="type === 'BackgroundImg'">
      <ProductBackgroundImg :imgSrc="imgSrc" :height="height" :width="width"></ProductBackgroundImg>
    </template>
  </div>
</template>

<script>
import ProductBasics from './style/ProductBasics.vue'
import ProductBackgroundImg from './style/ProductBackgroundImg.vue'

export default {
  components: {
    ProductBasics,
    ProductBackgroundImg
  },
  props: {
    type: {
      default: 'Basices'
    },
    width: {
      type: String,
      default: '234px'
    },
    imgSrc: {
      type: String,
      required: true
    },
    title: {
      type: String
    },
    desc: {
      type: String
    },
    price: {
      type: Number
    },
    delPrice: {
      typeof: Number
    },
    height: {
      default: '260px'
    }
  }
}
</script>
